<template>
  <Menubar :model="{}">
    <template #start>
      <img :style="{verticalAlign:'bottom'}" alt="logo" class="p-mr-2" height="40" src="@/assets/primevue-logo.png">
    </template>
  </Menubar>
  <Splitter>
    <SplitterPanel :size="25" :style="{minHeight:'80vh'}" class="p-ai-center p-jc-center">
      <Tag class="p-mt-5" icon="pi pi-info-circle" severity="info" value="待审批"></Tag>
      <Panel v-for="item in list0" :collapsed="true" :header="item.name" :toggleable="true" class="p-m-3">
        <span v-if="!item.refList.length">暂无商品信息~</span>
        <Timeline v-else :value="item.refList" align="alternate">
          <template #content="slotProps">
            <img :src="slotProps.item.pic" class="goodsPic">
            <Tag :value="slotProps.item.commodityName+'#'+slotProps.item.id" class="p-mt-3" severity="primary"></Tag>
          </template>
        </Timeline>
        <template #icons>
          <button class="p-panel-header-icon p-mr-2" @click="toPass(item.id)">
            <span class="pi pi-check-circle"></span>
          </button>
          <button class="p-panel-header-icon p-mr-2" @click="toCancel(item.id)">
            <span class="pi pi-times-circle"></span>
          </button>
        </template>
      </Panel>
    </SplitterPanel>
    <SplitterPanel>
      <Splitter layout="vertical">
        <SplitterPanel class="p-d-flex p-ai-center p-jc-center" style="height: 300px">
          <Chart :data="chartData2" :height="300" :width="500" type="line"/>
        </SplitterPanel>
        <SplitterPanel>
          <Splitter>
            <SplitterPanel class="p-ai-center p-jc-center">
              <Tag class="p-mt-5" icon="pi pi-check" severity="success" value="已通过"></Tag>
              <Panel v-for="item in list1" :collapsed="true" :header="item.name" :toggleable="true" class="p-m-3">
                <span v-if="!item.refList.length">暂无商品信息~</span>
                <Timeline v-else :value="item.refList" align="alternate">
                  <template #content="slotProps">
                    <img :src="slotProps.item.pic" class="goodsPic">
                    <Tag :value="slotProps.item.commodityName+'#'+slotProps.item.id" class="p-mt-3"
                         severity="primary"></Tag>
                  </template>
                </Timeline>
              </Panel>
            </SplitterPanel>
            <SplitterPanel class="p-ai-center p-jc-center">
              <Tag class="p-mt-5" icon="pi pi-times" severity="danger" value="未通过"></Tag>
              <Panel v-for="item in list2" :collapsed="true" :header="item.name" :toggleable="true" class="p-m-3">
                <span v-if="!item.refList.length">暂无商品信息~</span>
                <Timeline v-else :value="item.refList" align="alternate">
                  <template #content="slotProps">
                    <img :src="slotProps.item.pic" class="goodsPic">
                    <Tag :value="slotProps.item.commodityName+'#'+slotProps.item.id" class="p-mt-3"
                         severity="primary"></Tag>
                  </template>
                </Timeline>
              </Panel>
            </SplitterPanel>
          </Splitter>
        </SplitterPanel>
      </Splitter>
    </SplitterPanel>
  </Splitter>
</template>

<script setup>
import service from '@/request.js'
import S from "@/store"
import {useConfirm} from 'primevue/useconfirm'
import {useToast} from 'primevue/usetoast'
import {onMounted, ref} from 'vue'
import {getDays} from '@/util'

const Toast = useToast(), Confirm = useConfirm()


const chartData2 = {
  labels: getDays(),
  datasets: [
    {
      label: '七天内拒绝',
      backgroundColor: '#42A5F5',
      data: [0, 0, 0, 0, 0, 0, 0]
    },
    {
      label: '七天内通过',
      backgroundColor: '#FFA726',
      data: [0, 0, 0, 0, 0, 0, 0]
    }
  ]
}

let list0 = ref([]), list1 = ref([]), list2 = ref([])

onMounted(() => {
  getReviewList()
  service.get('review/graph/reviewer/operator?reviewerId=2').then(r => {
    chartData2.datasets[0].data = r.notAccess
    chartData2.datasets[1].data = r.access
    S.commit('setLoading', false)
  })
})

function toPass(id) {
  Confirm.require({
    message: '确认通过此条申请',
    header: '审核',
    icon: 'pi pi-exclamation-triangle',
    accept: () => {
      service.put(`review/id/${id}/canPass/1?reviewerId=2`).then(r => {
        getReviewList()
      }).catch(e => Toast.add({severity: 'error', summary: e, life: 3000}))
    }
  })
}

function toCancel(id) {
  Confirm.require({
    message: '确认拒绝此条申请',
    header: '审核',
    icon: 'pi pi-exclamation-triangle',
    accept: () => {
      service.put(`review/id/${id}/canPass/0?reviewerId=2`).then(r => {
        getReviewList()
      }).catch(e => Toast.add({severity: 'error', summary: e, life: 3000}))
    }
  })
}

function getReviewList() {
  service.get('review/?isArchive=1&isReview=0&reviewer=2').then(r => list0.value = r)
  service.get('review/?isReview=1&isAccess=0&reviewer=2').then(r => list2.value = r)
  service.get('review/?isReview=1&isAccess=1&reviewer=2').then(r => list1.value = r)

}
</script>
<style lang="stylus">
body
  overflow auto

.p-menubar
  top 0
  position sticky
  z-index 100

.goodsPic
  width 50px
  border-radius 10px
  vertical-align middle
  margin-right 20px
</style>
